<template>
	<div>
		<div class="bgff" style="min-height:100%;">
			{{userQQ}}{{phone}}{{newPwd}}
			<div class="b-e0e0e0 clear" style="width:1100px;">
				<ul style="width:50%;" class="fl">
					<h3 class="title ptb20 plr20">基本信息</h3>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">姓名</span>
						<span class="c-main fl">{{userInfo.userName}}</span>
					</li>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">账号</span>
						<span class="c-main fl">{{userInfo.userPhone}}</span>
					</li>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">会员等级</span>
						<span class="c-main fl"><i class="layui-icon c-f2752e"></i></span>
					</li>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">联系QQ</span>
						<span class="c-main fl">{{userInfo.userQQ}}</span>
						<!-- <a class="border-btn ml10"  onclick="editQQ()">增加</a> -->
						<!-- Form -->
						<el-button class="border-btn ml10" type="text" @click="dialogFormVisibleQQ = true">增加</el-button>
						<el-dialog title="添加绑定的QQ" :visible.sync="dialogFormVisibleQQ">
							<el-input prefix-icon="el-icon-user" v-model="userQQ" placeholder="请输入添加绑定的QQ"></el-input>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisibleQQ = false">取 消</el-button>
								<el-button type="warning" @click="editQQ()">确 定</el-button>
							</div>
						</el-dialog>
						<!-- form -->
					</li>
					<li class="clear ptb10">
						<span class="name fl">联系电话</span>
						<span class="c-main fl">{{userInfo.userPhone}}</span>
						<!-- <a class="border-btn ml10"  onclick="editPhone({phone:'13378173515',type:'sd54'})"></a> -->
						<el-button class="border-btn ml10" type="text" @click="dialogFormVisiblePhone = true">修改</el-button>
						<el-dialog title="改绑联系电话" :visible.sync="dialogFormVisiblePhone">
							<el-input prefix-icon="el-icon-phone
" placeholder="请输入内容" :value="userInfo.userPhone">
							</el-input>
							<div style="height: 30px;"></div>
							<div style="display: flex; flex-direction: row;">
								<el-input prefix-icon="el-icon-unlock" placeholder="请输入短信验证码" v-model="virCode" style="width: 250px;"></el-input>
								<el-button :disabled="countFlag" @click="sendCode('1')">{{btnMsg}}</el-button>
							</div>
							<div style="height: 30px;"></div>
							<el-input prefix-icon="el-icon-phone" placeholder="请输入新手机号" v-model="phone"></el-input>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogFormVisiblePhone = false">取 消</el-button>
								<el-button type="warning" @click="editPhone()">确 定</el-button>
							</div>
						</el-dialog>
					</li>
				</ul>
				<ul style="width:50%;" class="fl">
					<h3 class="title ptb20 plr20">财务信息</h3>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">账户余额</span>
						<span class="c-main fl">￥{{money}}</span>
					</li>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">冻结余额</span>
						<span class="c-main fl">￥{{userInfo.userBlockedBalance}}</span>
					</li>
					<li class="clear ptb10 bb-e0e0e0">
						<span class="name fl">可用余额</span>
						<span class="c-main fl">￥{{userInfo.userBalance}}</span>
					</li>

				</ul>

			</div>
			<div class=" mt20">
				<div class="b-e0e0e0" style="width:1100px;">
					<ul style="width:100%;">
						<h3 class="title ptb20 plr20">安全信息</h3>
						<li class="clear ptb10 bb-e0e0e0">
							<span class="name fl">登录密码</span>
							<!-- <a class="border-btn" href="javascript:;" onclick="editPassword({phone:' 13378173515  ',type:'edit_login'})">修改</a> -->
							<el-button class="border-btn ml10" type="text" @click="dialogFormVisiblePassword = true">修改</el-button>
							<el-dialog title="修改登录密码" :visible.sync="dialogFormVisiblePassword">
								<el-input prefix-icon="el-icon-phone
								" placeholder="请输入内容" :value="userInfo.userPhone" :disabled="true">
								</el-input>
								<div style="height: 30px;"></div>
								<div style="display: flex; flex-direction: row;">
									<el-input prefix-icon="el-icon-unlock" placeholder="请输入短信验证码" v-model="virCode" style="width: 250px;"></el-input>
									<el-button :disabled="countFlag" @click="sendCode('2')">{{btnMsg}}</el-button>
								</div>
								<div style="height: 30px;"></div>
								<el-input prefix-icon="el-icon-unlock" placeholder="请输入需要修改登录密码" v-model="newPwd" show-password></el-input>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisiblePassword = false">取 消</el-button>
									<el-button type="warning" @click="editPassword">确 定</el-button>
								</div>
							</el-dialog>
						</li>
						<li class="clear ptb10">
							<span class="name fl">支付密码</span>
							<!-- <a class="border-btn" href="javascript:;" onclick="editPassword({phone:' 13378173515  ',type:'add_pay'})">设置</a> -->
							<el-button class="border-btn ml10" type="text" @click="dialogFormVisiblePayPassword = true">设置</el-button>
							<el-dialog prefix-icon="el-icon-unlock" title="修改支付密码" :visible.sync="dialogFormVisiblePayPassword">
								<el-input prefix-icon="el-icon-phone
								" placeholder="请输入内容" :value="userInfo.userPhone" :disabled="true">
								</el-input>
								<div style="height: 30px;"></div>
								<div style="display: flex; flex-direction: row;">
									<el-input prefix-icon="el-icon-unlock" placeholder="请输入短信验证码" v-model="virCode" style="width: 250px;"></el-input>

									<el-button :disabled="countFlag" @click="sendCode('3')">{{btnMsg}}</el-button>
								</div>
								<div style="height: 30px;"></div>
								<el-input placeholder="请输入需要修改支付密码" v-model="newPayPwd" show-password></el-input>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dialogFormVisiblePayPassword = false">取 消</el-button>
									<el-button type="warning" @click="editPayPassword">确 定</el-button>
								</div>
							</el-dialog>
						</li>
					</ul>
				</div>
			</div>
			<!-- <div class=" mt20">
				<div class="b-e0e0e0 pcub" style="width:1100px;">
					<ul style="width:100%;">
						<h3 class="title ptb20 plr20">收款账户信息
							<a class="border-btn ml10" href="javascript:;" onclick="addAccount(' 13378173515  ')">添加 </a>
						</h3>
					</ul>
				</div>
			</div>
		 -->
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.showInfo();
		},
		data() {
			return {
				dialogFormVisiblePassword: false,
				dialogFormVisiblePhone: false,
				dialogFormVisibleQQ: false,
				dialogFormVisiblePayPassword: false,
				btnMsg: "发送验证码",
				countFlag: false,
				countNum: 30,
				money: '',
				phone: "",
				newPwd: '',
				newPayPwd: '',
				userQQ: '',
				virCode: '',
				userInfo: {
					id: "1",
					userName: null,
					userImageUrl: "string",
					userRank: 1,
					userPhone: "15575279642",
					userWechat: "string",
					userMicroblog: "string",
					userQQ: "string",
					userBalance: 24.32,
					userBlockedBalance: 556.36,
					lastTime: null,
					contactNumber: null,
					createTime: 1573699800000,
					updateTime: 1573739598000
				}
			}
		},
		methods: {
			editPayPassword() {
				this.dialogFormVisiblePayPassword = false,
					this.$api.adminUser.savePayPassword({
						"code": this.virCode,
						"phone": this.userInfo.userPhone,
						"pwd": this.newPayPwd
					}).then(res => {
						this.virCode = "";
						this.$message({
							type: 'success',
							message: '密码修改成功'
						});
					});
			},
			editPassword() {
				this.dialogFormVisiblePassword = false;
				this.$api.adminUser.updateJccmUserByPassword({
					"code": this.virCode,
					"userPassword": this.newPwd,
					"userPhone": this.userInfo.userPhone
				}).then(res => {
					this.virCode = "";
					this.$message({
						type: 'success',
						message: '密码修改成功'
					});

				});
			},
			editPhone() {
				this.dialogFormVisiblePhone = false;
				this.$api.adminUser.updateJccmUserByPhone({
					"code": this.virCode,
					"contactNumber": this.phone
				}).then(res => {
					this.virCode = "";
					this.$message({
						type: 'success',
						message: '密码修改成功'
					});

				});
			},
			editQQ() {
				this.dialogFormVisibleQQ = false;
				this.$api.adminUser.updateAdminUser({
					contactNumber: "",
					id: '',
					userImageUrl: "",
					userMicroblog: "",
					userName: "",
					userQQ: this.userQQ,
					userWechat: ""
				}).then(res => {
					this.virCode = "";
					this.userInfo.userQQ = this.userQQ;
					this.$message({
						type: 'success',
						message: '修改成功',
					})
				});
			},
			sendCode(type) {
				this.$api.req.codeOne({
					"type": type,
					"userPhone": this.userInfo.userPhone
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						this.$message({
							type: 'success',
							message: "信息发送成功",
						});
						this.countDown()
					} else {
						this.$message.error('消息获取失败');
					}

				});
			},
			countDown() {
				// 更改btn状态
				this.countFlag = !this.countFlag;
				// 设置倒计时
				this.intervalBtn = setInterval(() => {
					if (this.countNum <= 0) {
						// 重置btn提示信息
						this.btnMsg = "发送验证码";
						// 清除定时器
						clearInterval(this.intervalBtn)
						// 更改btn状态
						this.countFlag = !this.countFlag;
						// 重置倒计时状态
						this.countNum = 30;
					} else {
						this.btnMsg = this.countNum + 's后获取'
					}
					// 倒计时

					this.countNum--;
				}, 1000);
			},

			showInfo() {
				this.$api.user.findJccmUserById().then(res => {
					this.userInfo = res.data;
					this.money = res.data.userBalance + res.data.userBlockedBalance;
					this.money = parseFloat(this.money).toFixed(2);
				});
			}
		}
	}
</script>

<style>
	.el-dialog {
		width: 30% !important;
	}

	.err {
		display: none;
		top: -20px;
		height: 20px;
		line-height: 18px;
		background: red;
		z-index: 88;
		color: #fff;
		position: absolute;
		font-size: 12px;
		padding: 0 10px;
		border-radius: 3px;
		-moz-user-select: none;
		-khtml-user-select: none;
		user-select: none;
	}

	.err::after {
		content: '';
		position: absolute;
		left: 10px;
		bottom: -10px;
		border-width: 5px;
		border-style: solid;
		border-color: red transparent transparent transparent;
	}

	.name {
		width: 100px;
		margin-right: 20px;
		text-align: right;
	}

	.title {
		background: #f0f0f0;
	}

	.border-btn {
		padding: 0 5px;
		border-radius: 2px;
		border: 1px solid #f2752e;
		color: #f2752e;
		font-size: 12px;
	}

	.border-btn:hover {
		color: #f2752e;
	}

	.pl40 {
		padding-left: 60px;
	}

	.khb-check-item em {
		display: none;
		color: #666;
		transform: scale(0.6);
	}

	.khb-check-item .check-input:checked~em {
		position: absolute;
		display: block;
		left: -50px;
		top: 2px;
	}
</style>
